<template>
	<view class="uploadMerchantInfo">
		<u-navbar
			title="商户营业信息" 
			left-text="" 
			@leftClick="onClickBack"
			:placeholder="true"
			:fixed="true"
			:safeAreaInsetTop="true"
		></u-navbar>
		<view class="content">
			<view class="w-flex w-flex-center">
				<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					:maxCount="1"
					
					width="250"
					height="150">
					<image src="../../static/icon/BusinessLicense_e.jpg" 
					mode="widthFix" style="width: 250px;height: 150px;"></image>
					
				</u-upload>
				
			</view>
			<view class="w-flex w-flex-center">
				<text class="w-txt-999 w-m-10">上传营业执照</text>
			</view>
			
			<view>
				<view class="w-flex w-flex-between w-p-tb-15" style="border-bottom: 1px solid #efefef;">
					<text class="labelWidth">营业执照</text>
					<u--input
						placeholder="请输入营业执照注册号"
						border="none"
						v-model="MerchantInfo.license"
						clearable
					></u--input>
				</view>
				<view class="w-flex w-flex-between w-p-tb-15">
					<text class="labelWidth">执照名称</text>
					<u--input
						placeholder="请输入执照名称"
						border="none"
						v-model="MerchantInfo.licenseFullName"
						clearable
					></u--input>
				</view>
				<view class="w-flex w-flex-between w-p-tb-15" style="border-bottom: 1px solid #efefef;">
					<text class="labelWidth">注册地址</text>
					<u--input
						placeholder="请输入注册地址"
						border="none"
						v-model="MerchantInfo.licenseAddress"
						clearable
					></u--input>
				</view>
				<view class="w-flex w-p-tb-15" style="border-bottom: 1px solid #efefef;">
					<text class="labelWidth">期限类型</text>
					<u-radio-group
						v-model="MerchantInfo.IDTimeType"
						placement="row"
						@change="checkboxChange">
						<u-radio
								v-for="(item, index) in IDTimeTypeList"
								:key="index"
								:label="item.name"
								shape="circle"
								class="w-mr-15"
								:name="item.id">
						</u-radio>
					</u-radio-group>
				</view>
				<view class="w-flex w-p-tb-15" style="border-bottom: 1px solid #efefef;">
					<text class="labelWidth">有效期</text>
					<view class="w-flex w-flex-between">
						<view class="startTime" @click="showTime = true" :style="showCurrStartTime !== '开始时间'?'color:#000;font-size:14px;':''">
							<text>{{showCurrStartTime}}</text>
							<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
						</view>
						<text style="margin: 0 10px;">至</text>
						<view class="startTime" v-if="MerchantInfo.IDTimeType === 2" :style="showCurrEndTime !== '结束时间'?'color:#000;font-size:14px;':''">
							<text>{{showCurrEndTime}}</text>
							<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
						</view>
						<view class="startTime" v-else @click="showEndTime = true" :style="showCurrEndTime !== '结束时间'?'color:#000;font-size:14px;':''">
							<text>{{showCurrEndTime}}</text>
							<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
						</view>
					</view>
				</view>
				<view>
					<u-datetime-picker
						:show="showTime"
						:value="startTime"
						mode="date"
						@cancel="cancel"
						@confirm="confirmTime"
						:formatter="formatter"
						:closeOnClickOverlay="true"
						:minDate="631123200000"
						:maxDate="4070880000000"
						@close="cancel"
					></u-datetime-picker>
					<u-datetime-picker
						:show="showEndTime"
						:value="endTime"
						mode="date"
						@cancel="cancelEndTime"
						@confirm="confirmEndTime"
						:formatter="formatter"
						:closeOnClickOverlay="true"
						:minDate="631123200000"
						:maxDate="4070880000000"
						@close="cancelEndTime"
					></u-datetime-picker>
				</view>
				
			</view>
		</view>
		<view class="btnBox">
			<u-button text="保存" color="#fff" class="preservationBtn" @click="preservationChange"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data () {
		return {
			fileList1: [],
			MerchantInfo: {
				license: '',
				licenseFullName: '',
				licenseAddress: '',
				licensePic: '',
				IDTimeType: 1
			},
			IDTimeTypeList: [
				{
					id: 1,
					name: '有效期'
				},
				{
					id: 2,
					name: '长期'
				}
			],
			showTime: false,
			showEndTime: false,
			startTime: Number(new Date()),
			endTime: Number(new Date()),
			showCurrEndTime: '结束时间',
			showCurrStartTime: '开始时间',
			userId: ''
		}
	},
	onLoad(e) {
		this.userId = e.id
		if (uni.getStorageSync("licenseInfo")) {
			this.MerchantInfo.license = uni.getStorageSync("licenseInfo").license
			this.MerchantInfo.licenseFullName = uni.getStorageSync("licenseInfo").licenseFullName
			this.MerchantInfo.licenseAddress = uni.getStorageSync("licenseInfo").licenseAddress
			this.showCurrStartTime = uni.getStorageSync("licenseInfo").licenseStart
			this.showCurrEndTime = uni.getStorageSync("licenseInfo").licenseEnd
			if (this.showCurrEndTime === '长期') {
				this.MerchantInfo.IDTimeType = 2
			}
			this.MerchantInfo.licensePic = uni.getStorageSync("licenseInfo").licensePic
			this.fileList1 = [{url: uni.getStorageSync("licenseInfo").licensePic}]
		}
	},
	methods: {
		onClickBack () {
			uni.navigateBack()
		},
		
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
			this.MerchantInfo.licensePic = ''
		},
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].thumb)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}
		},
		
		async uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://ynf.xxhf.cn/index.php/api/user/upload_to_les', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						file:this.fileList1[0]
					},
					success: (res) => {
						this.MerchantInfo.licensePic = JSON.parse(res.data).data.fullurl
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
		checkboxChange (list) {
			console.log(list)
			if (list === 2) {
				this.showCurrEndTime = '长期'
			} else {
				this.showCurrEndTime = uni.getStorageSync("licenseInfo").licenseEnd || '结束时间'
			}
		},
		cancel () {
			this.showTime = false
		},
		cancelEndTime () {
			this.showEndTime = false
		},
		confirmEndTime (date) {
			this.showEndTime = false
			this.showCurrEndTime = this.formatTimer(date.value)
		},
		confirmTime (date) {
			this.showCurrStartTime = this.formatTimer(date.value)
			this.showTime = false
		},
		formatter(type, value) {
			if (type === 'year') {
					return `${value}年`
			}
			if (type === 'month') {
					return `${value}月`
			}
			if (type === 'day') {
					return `${value}日`
			}
			return value
		},
		formatTimer(time, type) {
			var time = new Date(time);
			var y = time.getFullYear();
			var m = time.getMonth()+1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			if (type === 'YMD') {
				return y+'年'+this.add0(m)+'月'+this.add0(d)+'日';
			}
			return y+'-'+this.add0(m)+'-'+this.add0(d);
		},
		add0(m){return m<10?'0'+m:m },
		preservationChange () {
			if(this.MerchantInfo.licensePic === '') {
				uni.showToast({
					icon: 'none',
					title: '请上传营业执照'
				})
				return
			}
			if(this.MerchantInfo.license === '') {
				uni.showToast({
					icon: 'none',
					title: '请输入营业执照注册号'
				})
				return
			}
			if(this.MerchantInfo.licenseFullName === '') {
				uni.showToast({
					icon: 'none',
					title: '请输入营业执照名称'
				})
				return
			}
			if(this.MerchantInfo.licenseAddress === '') {
				uni.showToast({
					icon: 'none',
					title: '请输入营业执照注册地址'
				})
				return
			}
			if(this.showCurrStartTime === '开始时间') {
				uni.showToast({
					icon: 'none',
					title: '请选择营业执照注册号开始日期'
				})
				return
			}
			if(this.showCurrEndTime === '结束时间') {
				uni.showToast({
					icon: 'none',
					title: '请选择营业执照注册号结束日期'
				})
				return
			}
			if((new Date(this.showCurrStartTime)).getTime() > (new Date(this.showCurrEndTime)).getTime()) {
				uni.showToast({
					icon: 'none',
					title: '日期选择错误'
				})
				return
			}
			let params = {
				license: this.MerchantInfo.license,
				licenseFullName: this.MerchantInfo.licenseFullName,
				licenseAddress: this.MerchantInfo.licenseAddress,
				licenseStart: this.showCurrStartTime,
				licenseEnd: this.showCurrEndTime,
				licensePic: this.MerchantInfo.licensePic,
			}
			uni.setStorageSync("licenseInfo", params)
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.uploadMerchantInfo {
	.content {
		padding: 0 20rpx;
		padding-top: 20rpx;
		background: #FFFFFF;
		.labelWidth {
			width: 140rpx;
		}
		.startTime {
			background: #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #b3b3b3;
			padding: 0 20rpx;
			width: 240rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	.btnBox {
		margin-top: 40rpx;
		padding: 20rpx;
		.preservationBtn {
			background-color: #1678ff !important;
		}
	}
}
</style>
